<template>
  <!-- 速度转盘-->
  <div style="padding: 10px; display: flex; flex-direction: column; align-items: center;">
    <svg width="200" height="200" style="margin-bottom: 0;">
      <line x1="100" y1="100" :x2="100 + radius * Math.cos(angle * Math.PI / 180)"
            :y2="100 + radius * Math.sin(angle * Math.PI / 180)" stroke="#000000FF" stroke-width="4"/>
      <circle cx="100" cy="100" :r="radius" fill="none" stroke="#000000FF" stroke-width="2"/>
      <circle cx="100" cy="100" r="5" fill="#000000FF"/>
    </svg>

    <div style="display: flex; justify-content: center; text-align: center; margin-top: 0;">
      <div class="speedControl" @click="increaseAngle" data-tooltip="顺时针"
           @keydown="increaseAngle">
        <img src="../../assets/img/向上1.png" alt="顺时针" style="width: 100%;height: 100%">
      </div> <!-- 圆形按钮 -->

      <div class="speedControl" @click="decreaseAngle" data-tooltip="逆时针"
           @keydown="decreaseAngle">
        <img src="../../assets/img/向下1.png" alt="逆时针" style="width: 100%;height: 100%">
      </div> <!-- 圆形按钮 -->

    </div>
    <div style="color: #08163f;font-size: 20px">
      {{ angle + 90 }}°
    </div>
  </div>
</template>


<script>
import disc from "@/assets/js/disc";

export default {
  data() {
    return {
      radius: 75,
      angle: -90,
    };
  },
  props: {
    ws: null,
    sendMessage: null
  },
  mounted() {
    document.addEventListener("keydown", this.onKeyDown);
  },
  beforeDestroy() {
    document.removeEventListener("keydown", this.onKeyDown)
  },
  methods: {
    increaseAngle() {
      this.angle = disc.increaseAngle(this.angle);
      if (this.angle + 90 > 360) {
        this.angle -= 360
      }
      this.button("right");
    },
    decreaseAngle() {
      this.angle = disc.decreaseAngle(this.angle);
      if (this.angle + 90 < -360) {
        this.angle += 360
      }
      this.button("left");
    },
    onKeyDown(event) {
      if (event.key === "j") {
        this.increaseAngle()
      } else if (event.key === "k") {
        this.decreaseAngle()
      }
    },
    button(buttonType) {
      const sendMessageDebounced = _.debounce((buttonType) => {
        switch (buttonType) {
          case 'right':
            this.sendMessage(30);
            break;
          case 'left':
            this.sendMessage(300);
            break;
          default:
            console.log('ok');
        }
      }, 50);
      sendMessageDebounced(buttonType);
    }
  }
}

</script>

<style>
</style>
